import React, {Component} from 'react'
import { Layout, Menu } from 'antd';
import '../style/index.css'
import { Switch, Route } from 'react-router-dom';
import MenuPage from './Menu';
import Role from './Role';
import Admin from './Admin';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            {/* <h1>小U商城后台</h1> */}
            <Menu.Item key="0">
            小U商城后台
            </Menu.Item>
            <Menu.Item key="1" icon={<UserOutlined />}>
              首页
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
              系统设置
            </Menu.Item>
            <Menu.Item key="3" icon={<UploadOutlined />}>
              商城管理
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <div className="ml20">
            {/* <router-view /> 地址不同，组件也不同，切换 */}
            {/* react的嵌套路由，写在组件中 */}
            <Switch>
              <Route path="/index/menu" component={MenuPage}/>
              <Route path="/index/role" component={Role}/>
              <Route path="/index/admin" component={Admin}/>
            </Switch>
          </div>
        </Layout>
      </Layout>
    );
  }
}

// ReactDOM.render(<SiderDemo />, mountNode);

export default SiderDemo